<template>
  <dt-modal-edit
    ref="edit"
    :title="title"
    :loading="loading"
    :label-width="130"
    okText="下载"
    :width="800"
    @ok="onOk">
    <div class="download_code">
      <Form ref="formValidate" :model="info" :rules="ruleValidateAdd" :label-width="130">
        <div style="display: flex; justify-content: start">
          <FormItem label="拓客码名:">{{ info.tokerName }}</FormItem>
          <FormItem label="渠道:">{{ info.channelName }}</FormItem>
          <FormItem label="点位:">{{ info.pointPositionName }}</FormItem>
        </div>
        <FormItem label="拓客人员:" required>
          <div style="display: flex">
            <div class="customer_for_code_modal">
              <p class="select_user">
                当前已选{{ selectUser.length }}个
                <span class="add_edit_btn" @click="addUser" v-if="selectUser.length">
                  <Icon type="md-add-circle" />
                  继续添加
                </span>
                <span class="add_edit_btn" @click="addUser" v-else>
                  <Icon type="md-add-circle" />
                  添加
                </span>
              </p>
            </div>
          </div>
        </FormItem>
        <FormItem label="尺寸:" prop="size">
          <div style="display: flex; justify-content: space-between">
            <RadioGroup v-model="info.size" style="display: flex; flex-direction: column">
              <Radio :label="item.key" v-for="item in sizeList" :key="item.key">
                {{ item.value }}
              </Radio>
            </RadioGroup>
            <div class="code_img">
              <img
                src="https://images.tospurfang.com/dt/8280422b2dbd4926bb502070dad93ae2.png"
                alt="活动示例二维码"
                class="test_img" />
              <div class="tips">提示：点击下载后查看真实活动二维码</div>
            </div>
          </div>
        </FormItem>
      </Form>
    </div>
    <select-user ref="selectUser" @success="onSuccess" />
  </dt-modal-edit>
</template>

<script>
  import selectUser from './selectUser.vue'
  import activityMgr from '@/biz/customerForCode/activity'
  import dt from '@dt/dt'

  export default {
    components: { selectUser },
    data() {
      return {
        loading: false,
        title: '下载二维码',
        info: {},
        ruleValidateAdd: {
          size: [{ required: true, message: '请选择需要下载的尺寸', trigger: 'change' }]
        },
        sizeList: dt.dictInfo().downloadPromoteCodeSize,
        fitImgTest: '',
        selectUser: [],
        defaultSelect: []
      }
    },
    methods: {
      show(data) {
        this.selectUser = []
        this.defaultSelect = []
        this.info = {
          ...data
        }
        this.$refs.edit.show()
      },
      addUser() {
        let buildingId = this.$dt.buildInfo().housesId
        let data = {
          selectUser: this.selectUser,
          defaultSelect: this.defaultSelect,
          buildingId
        }
        this.$refs.selectUser.show(data)
      },
      onSuccess(data) {
        this.selectUser = data
      },
      onOk() {
        this.$refs.formValidate
          .validate((valid) => {
            if (valid) {
              let promoteCodeIds = []
              let userList = [...this.selectUser, ...this.defaultSelect]

              if (userList.length == 0) {
                return this.$Message.warning('请选择拓客人员')
              } else {
                userList.forEach((item) => {
                  promoteCodeIds.push(item.userId)
                })
              }
              this.loading = true
              let params = {
                activityId: this.$route.query.activityId,
                tokerId: this.info.tokerId,
                pointPositionId: this.info.pointPositionId,
                userId: promoteCodeIds,
                size: this.info.size,
                activityType: this.$route.query.formPath == 'activity' ? 2 : 1,
                fileName:
                  `${this.info.activityName ? this.info.activityName + '-' : ''}` +
                  `${this.info.tokerName ? this.info.tokerName : ''}` +
                  `${this.info.pointPositionName != '-' ? '-' + this.info.pointPositionName : ''}` +
                  '.zip'
              }
              activityMgr
                .downloadPromoteCodeNew(params)
                .then((res) => {
                  this.$refs.edit.hide()
                  this.selectUser = []
                  this.defaultSelect = []
                  this.loading = false
                  this.$emit('success')
                })
                .catch((err) => {
                  this.loading = false
                })
            }
          })
          .catch(() => {
            this.loading = false
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .download_code {
    .code_img {
      width: 240px;
      position: relative;

      .test_img {
        width: 100%;
        height: 240px;
        object-fit: cover;
      }

      .mask_img {
        position: absolute;
        width: 100%;
        height: 285px;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
        line-height: 240px;
        color: #e4ff00;
        font-size: 20px;
        font-weight: 600;
      }

      .tips {
        color: #ff8100;
      }

      .mt_txt {
        text-align: center;
      }
    }

    .add_edit_btn {
      color: #0f42a7;
      cursor: pointer;
      margin-right: 10px;
    }
  }
</style>
